<template>
  <div class="product-detail">
    <module-base>
      <!-- 根据url判断位置 -->
      <div class="position" id="position">
        <span>当前位置&gt;<a href="javascript:void(0);">产品中心</a>&gt;<a href="javascript:void(0);">雷达</a></span>
      </div>
      <h2 class="product-name">雷达</h2>
      <div class="detail-wrap">
        <div class="img-wrap">
          <img :src="largeImg" alt="" class="large">
          <div class="small-list">
            <swiper :options="swiperOption" ref="mySwiper">
              <swiper-slide v-for="(item,index) in imgs" :key="index">
                <img :src="item" alt="" @click="showLarge(item)">
              </swiper-slide>
            </swiper>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
          </div>
        </div>
        <div class="detail">
          <div class="product-type">雷达系列ABC135雷达系列ABC135雷达系列ABC135</div>
          <div class="price"><span>价格</span><span class="num">￥148.00</span></div>
          <div class="table">
            <tr>应用：各类工业领域的液位测量，特别是水处理工业</tr>
            <tr>测量范围：液体：0.25...4m</tr>
            <tr>过程连接：G1½A</tr>
            <tr>换能器外壳材料：PTFE、PU/PC</tr>
            <tr>过程温度：-40...70℃</tr>
            <tr>过程压力：-0.2...1bar</tr>
            <tr>信号输出：两线制/四线制4...20mA/HART</tr>
          </div>
        </div>
      </div>
      <div class="more-detail">
        <table>
          <tr><th>详细介绍</th></tr>
        </table>
      </div>
    </module-base>
  </div>
</template>

<script>
  import moduleBase from 'COMPS/module-base.vue'

  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'

  export default {
    name: 'product-detail',
    components: {
      moduleBase,
      swiper,
      swiperSlide
    },
    data() {
      return {
        largeImg: '',
        imgs: ['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536900472019&di=75ddb342efc5bf997cf8ec62c947b0a9&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dpixel_huitu%252C0%252C0%252C294%252C40%2Fsign%3D80b0af2da018972bb737088a8fb51ee5%2F42a98226cffc1e17da241f084190f603738de974.jpg','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536901931457&di=843832f54f2a3b126aab6b7176899850&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F6f061d950a7b02087b6f12c568d9f2d3572cc86b.jpg','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536901931455&di=5c034c6c188d7712d496a45cc57d4a70&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dpixel_huitu%252C0%252C0%252C294%252C40%2Fsign%3D41333b00b8de9c82b268f1cf05f9e566%2Fcc11728b4710b9121b9729c7c8fdfc03924522b1.jpg','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536901931453&di=24cc8794ea04b9618403bf3c3d0a60d0&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fd52a2834349b033bfe106ff91fce36d3d539bd7d.jpg','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536900472019&di=75ddb342efc5bf997cf8ec62c947b0a9&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dpixel_huitu%252C0%252C0%252C294%252C40%2Fsign%3D80b0af2da018972bb737088a8fb51ee5%2F42a98226cffc1e17da241f084190f603738de974.jpg'],
        swiperOption: {
          slidesPerView: 4,
          spaceBetween : 20,
          observer:true,
          observeParents:true,
          autoplay: false,
          navigation: {
            nextEl: '.swiper-button-next', //前进按钮的css选择器或HTML元素。
            prevEl: '.swiper-button-prev', //后退按钮的css选择器或HTML元素。
            hideOnClick: true, //点击slide时显示/隐藏按钮
            disabledClass: 'my-button-disabled', //前进后退按钮不可用时的类名。
            hiddenClass: 'my-button-hidden', //按钮隐藏时的Class
          },
        }
      }
    },
    mounted() {
      // edit: 在拿图片接口的then中赋值
      this.largeImg = this.imgs[0];
    },
    computed: {
    },
    methods: {
      showLarge(item) {
        this.largeImg = item;
      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';

  .product-detail {
    .product-name {
      margin-top: 40px;
      margin-bottom: 70px;
      font-weight: normal;
    }
    .detail-wrap {
      padding-bottom: 20px;
      margin-bottom: 30px;
      border-bottom: 10px solid #eeeeee;
      .img-wrap {
        display: inline-block;
        vertical-align: top;
        margin-right: 60px;
        .large {
          margin-left: 5px;
          width: 440px;
          height: 300px;
        }
        .small-list {
          position: relative;
          margin-top: 40px;
          height: 100px;
          width: 460px;
          img {
            cursor: pointer;
          }
          .swiper-button-next {
            margin-right: -45px;
            background-image: url(~IMGS/swiper-right.png);
          }
          .swiper-button-prev {
            margin-left: -45px;
            background-image: url(~IMGS/swiper-left.png);
          }
          .swiper-button-next,
          .swiper-button-prev{
            background-size: 100%;
            width: 14px;
            &:focus {
              outline: none;
            }
          }
          img {
            height: 100px;
            width: 100px;
          }
        }
      }
      .detail {
        display: inline-block;
        vertical-align: top;
        width: 645px;
        .product-type {
          font-size: 20px;
          margin-bottom: 20px;
        }
        .price {
          line-height: 60px;
          padding-left: 38px;
          font-size: 20px;
          background-color: #47beda;
          >span {vertical-align: middle;}
          .num {
            vertical-align: middle;
            font-size: 28px;
            font-weight: bold;
          }
        }
        .table {
          padding-top: 15px;
          color: #666;
          >tr {
            line-height: 50px;
          }
        }
      }
    }
    .more-detail {
      table {
        th {
          font-weight: bold;
          color: #010101;
        }
      }
    }
  }
</style>